<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市选择案例</title>
    <style>
        #src-city{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        #tar-city{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        #src-city,#tar-city,.btn-box{
            display: inline-block;
        }
        .btn-box > button{
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h1>城市选择：</h1>
<select name="src-city" id="src-city" multiple>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">北京</option>
    <option value="5">杭州</option>
</select>
    <div class="btn-box">
        <button id="btn-sel-all">&gt;&gt;</button>
        <button id="btn-sel-none">&lt;&lt;</button>
        <button id="btn-sel">&gt;</button>
        <button id="btn-back">&lt;</button>
    </div>
    <select name="tar-city" id="tar-city" multiple></select>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('#btn-sel-all').click(function () {
            // 获取所有左边select下拉菜单的option选项并移动到右边
            $('#src-city > option').appendTo($('#tar-city'));
        });
        $('#btn-sel-none').click(function () {
            $('#tar-city > option').appendTo($('#src-city'));
        });
        $('#btn-sel').click(function () {
            $('#src-city > option:selected').appendTo($('#tar-city'));
        });
        $('#btn-back').click(function () {
            $('#tar-city > option:selected').appendTo($('#src-city'));
        })
    })
</script>
</html>